/*
 * Copyright 2022 Nightingale Team
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */
import React from 'react';
import { Form, Radio, Slider, Space, Select } from 'antd';
import _ from 'lodash';
import { useTranslation } from 'react-i18next';
import { Panel } from '../../Components/Collapse';

export default function GraphStyles() {
  const { t } = useTranslation('dashboard');
  const namePrefix = ['custom'];
  const showPoints = Form.useWatch([...namePrefix, 'showPoints']);

  return (
    <Panel header={t('panel.custom.title')} data-oid='ct3s4t1'>
      <>
        <Space data-oid='u5at3j9'>
          <Form.Item label={t('panel.custom.timeseries.drawStyle')} name={[...namePrefix, 'drawStyle']} data-oid='7q-ryar'>
            <Radio.Group buttonStyle='solid' data-oid='zcb912c'>
              <Radio.Button value='lines' data-oid='gmtmfds'>
                Lines
              </Radio.Button>
              <Radio.Button value='bars' data-oid='6.1ucyw'>
                Bars
              </Radio.Button>
            </Radio.Group>
          </Form.Item>
          <Form.Item
            noStyle
            shouldUpdate={(prevValues, curValues) => _.get(prevValues, [...namePrefix, 'drawStyle']) !== _.get(curValues, [...namePrefix, 'drawStyle'])}
            data-oid='l6tnwfh'
          >
            {({ getFieldValue }) => {
              const drawStyle = getFieldValue([...namePrefix, 'drawStyle']);
              if (drawStyle === 'lines' || drawStyle === 'bars') {
                return (
                  <>
                    {drawStyle === 'lines' ? (
                      <Form.Item label={t('panel.custom.timeseries.lineInterpolation')} name={[...namePrefix, 'lineInterpolation']} data-oid='79zs3w3'>
                        <Radio.Group buttonStyle='solid' data-oid='6r.xlh8'>
                          <Radio.Button value='linear' data-oid='-qj7n.k'>
                            Linear
                          </Radio.Button>
                          <Radio.Button value='smooth' data-oid='-mz.hxh'>
                            Smooth
                          </Radio.Button>
                        </Radio.Group>
                      </Form.Item>
                    ) : null}
                  </>
                );
              }
              return null;
            }}
          </Form.Item>
          <Form.Item label={t('panel.custom.timeseries.spanNulls')} name={[...namePrefix, 'spanNulls']} initialValue={false} data-oid='4uccdx-'>
            <Radio.Group buttonStyle='solid' data-oid='618.xig'>
              <Radio.Button value={true} data-oid='9og5289'>
                {t('panel.custom.timeseries.spanNulls_1')}
              </Radio.Button>
              <Radio.Button value={false} data-oid='ov0y021'>
                {t('panel.custom.timeseries.spanNulls_0')}
              </Radio.Button>
            </Radio.Group>
          </Form.Item>
        </Space>
        <Form.Item label={t('panel.custom.timeseries.lineWidth')} name={[...namePrefix, 'lineWidth']} data-oid='jw.k7y0'>
          <Slider min={0} max={10} step={1} data-oid='m4k3aus' />
        </Form.Item>
        <Form.Item label={t('panel.custom.timeseries.fillOpacity')} name={[...namePrefix, 'fillOpacity']} data-oid='2bzcldy'>
          <Slider min={0} max={1} step={0.01} data-oid='200rfl1' />
        </Form.Item>
        <Space data-oid='8bk-_z0'>
          <Form.Item label={t('panel.custom.timeseries.gradientMode')} name={[...namePrefix, 'gradientMode']} data-oid='qt2uebb'>
            <Radio.Group buttonStyle='solid' data-oid='ya_9hwl'>
              <Radio.Button value='opacity' data-oid='5p7xol_'>
                {t('panel.custom.timeseries.gradientMode_opacity')}
              </Radio.Button>
              <Radio.Button value='none' data-oid='1623hxg'>
                {t('panel.custom.timeseries.gradientMode_none')}
              </Radio.Button>
            </Radio.Group>
          </Form.Item>
          <Form.Item label={t('panel.custom.timeseries.stack')} name={[...namePrefix, 'stack']} data-oid='b_:gny0'>
            <Radio.Group buttonStyle='solid' data-oid='k73qcj-'>
              <Radio.Button value='noraml' data-oid='aq::gck'>
                {t('panel.custom.timeseries.stack_noraml')}
              </Radio.Button>
              <Radio.Button value='off' data-oid='60ad-6x'>
                {t('panel.custom.timeseries.stack_off')}
              </Radio.Button>
            </Radio.Group>
          </Form.Item>

          <Form.Item
            noStyle
            shouldUpdate={(prevValues, curValues) => _.get(prevValues, [...namePrefix, 'scaleDistribution']) !== _.get(curValues, [...namePrefix, 'scaleDistribution'])}
            data-oid='tao.mz:'
          >
            {({ getFieldValue, setFields }) => {
              const scaleDistributionType = getFieldValue([...namePrefix, 'scaleDistribution', 'type']);
              return (
                <Space data-oid='tvejzu7'>
                  <Form.Item label='YAxis Scale' name={[...namePrefix, 'scaleDistribution', 'type']} data-oid='_z_rw4y'>
                    <Radio.Group
                      buttonStyle='solid'
                      onChange={(e) => {
                        if (e.target.value === 'log') {
                          setFields([
                            {
                              name: [...namePrefix, 'scaleDistribution', 'log'],
                              value: 10,
                            },
                          ]);
                        }
                      }}
                      data-oid='o_h3ctl'
                    >
                      <Radio.Button value='linear' data-oid='8p190w7'>
                        Linear
                      </Radio.Button>
                      <Radio.Button value='log' data-oid='8z8olg6'>
                        Logarithmic
                      </Radio.Button>
                    </Radio.Group>
                  </Form.Item>
                  {scaleDistributionType === 'log' && (
                    <Form.Item label=' ' name={[...namePrefix, 'scaleDistribution', 'log']} data-oid='4833y6l'>
                      <Select style={{ width: 80 }} data-oid='isnuzk8'>
                        <Select.Option value={2} data-oid='g7-t4n4'>
                          2
                        </Select.Option>
                        <Select.Option value={10} data-oid='x9m8z0o'>
                          10
                        </Select.Option>
                      </Select>
                    </Form.Item>
                  )}
                </Space>
              );
            }}
          </Form.Item>
        </Space>
        <Form.Item label={t('panel.custom.timeseries.showPoints')} name={[...namePrefix, 'showPoints']} data-oid='bflzjp8'>
          <Radio.Group buttonStyle='solid' data-oid='q4t7efo'>
            <Radio.Button value='always' data-oid='0o0fgbz'>
              {t('panel.custom.timeseries.showPoints_always')}
            </Radio.Button>
            <Radio.Button value='none' data-oid='97k0t3j'>
              {t('panel.custom.timeseries.showPoints_none')}
            </Radio.Button>
          </Radio.Group>
        </Form.Item>
        <Form.Item label={t('panel.custom.timeseries.pointSize')} name={[...namePrefix, 'pointSize']} hidden={showPoints === 'none'} data-oid='3537cfi'>
          <Slider min={1} max={40} step={1} data-oid='7u64onz' />
        </Form.Item>
      </>
    </Panel>
  );
}
